<template>
  <el-row>
    <el-col :span="24" style="margin-bottom:10px;">
      <div style="float:right" >
        <el-button type="text">请选择事件类型：</el-button>
        <el-select v-model="filter.type" @change="changeData">
          <el-option v-for="(v,i) in types" :key="i" :label="v.name" :value="v.value">
          </el-option>
        </el-select>
        <el-button type="text">请选择日期范围：</el-button>
        <el-date-picker  v-model="time1" type="daterange" @change="change1" placeholder="选择日期范围">
        </el-date-picker>
        <el-button type="primary" @click="flush">刷新</el-button>
      </div>
    </el-col>
    <el-col :span="18">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane  v-for="(v,i) in tabs" :key="i" :label="v.name" :name="v.value">
          <el-col   :span="24">
            <div :id="'chart'+(i+1)" style="width:1300px;height:866px;"></div>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-col>
     <el-col :span="6">
      <div class="tjInfo">
        <h2 style="padding:12px">数据统计</h2>
        <div style="padding:5px">
          <table  class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
            <tr>
              <td>地区</td>
              <td>{{currentTitle}}</td>
            </tr>
            <tr v-for="(v,index) in currentArea" :key="v" :class="index%2==0?'mycolor':''">
              <td>{{v}}</td>
              <td>{{currentData[index]}}</td>
            </tr>
            <tr class="mycolor">
              <td>合计</td>
              <td>{{getSum(currentData)}}</td>
            </tr>
          </table>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import * as api from "../../api/performance";

export default {
  data() {
    return {
      activeName: "report",
      histogram: null,
      type: ["社会治安事件", "矛盾纠纷事件", "交通事故", "网格巡防事件"],
      area: [],
      chart: null,
      time1: [],
      autogestion: null, // 自管
      emergency: null, // 紧急
      imperative: null, // 强制
      notPass: null, // 回复不实
      overtimeSolved: null, // 超时处置
      overtimeUnsolved: null, // 超时未处置
      report: null, //接单数
      return: null, //推诿
      rework: null, //返工
      timely: null, //及时
      currentArea:[],
      currentData:[],
      currentTitle:null,
      filter: {
        type: "01",
        start: null,
        end: null
      },
      tabs:[
        {
          name:'接单数',
          value:'report',
          data:null
        },
        {
          name:'应急处置数',
          value:'emergency',
          data:null
        },
        {
          name:'及时处置数',
          value:'timely',
          data:null
        },
        {
          name:'返工数',
          value:'rework',
          data:null
        },
        {
          name:'超时处置数',
          value:'overtimeSolved',
          data:null
        },
        {
          name:'超时未处置数',
          value:'overtimeUnsolved',
          data:null
        },
        {
          name:'推诿案件数',
          value:'return',
          data:null
        },
        {
          name:'回复不实案件数',
          value:'notPass',
          data:null
        },
        {
          name:'强制派单数',
          value:'imperative',
          data:null
        },
        {
          name:'自管工单',
          value:'autogestion',
          data:null
        }
      ],
      types: [
        {
          value: "01",
          name: "社会治安"
        },
        {
          value: "02",
          name: "矛盾纠纷"
        },
        {
          value: "03",
          name: "交通事故"
        },
        {
          value: "04",
          name: "网格巡防"
        },
        {
          value: "05",
          name: "问题上报"
        }
      ]
    };
  },
  methods: {
    change1(value) {
      if (value.length > 0) {
        let arr = value.split(" - ");
        this.filter.start = arr[0];
        this.filter.end = arr[1];
      } else {
        this.filter.start = null;
        this.filter.end = null;
      }
      this.init();
    },
    flush() {
      this.time1 = [];
      this.filter.start = null;
      this.filter.end = null;
      this.init();
    },
    getSum(data) {
      let sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }
      return sum;
    },
    initChart(datas,title,name,chartName) {
      this.chart = echarts.init(document.getElementById(chartName));
      this.chart.setOption({
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
       color: ["#CD1076"],
        title: {
          text: title
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: datas[0],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: name,
            type: "bar",
            barWidth: "50%",
            data: datas[1]
          }
        ]
      });
    },
    handleClick({name}){
      this.currentArea = this[name][0];
      this.currentData = this[name][1];
      this.currentTitle = this.getTitle(name);
    },
    changeData() {
      this.init();
    },
    getTitle(key){
      switch(key){
        case 'autogestion': return '自管工单数';
        case 'emergency': return '应急处置数';
        case 'imperative': return '强制派单数';
        case 'notPass': return '回复不实数';
        case 'overtimeSolved': return '超时处置数';
        case 'overtimeUnsolved': return '超时未处置数';
        case 'report': return '接单数';
        case 'return': return '推诿案件';
        case 'rework': return '返工数';
        case 'timely': return '及时处置数';
      }
    },
    getCurrentType(){
      for(let i=0;i<this.types.length;i++){
        if(this.types[i].value == this.filter.type){
          return this.types[i].name;
        }
      }
    },
    init() {
      api.getEventDataForCheck(this.filter).then(res => {
          this.currentArea = res.data.report[0];
          this.currentData = res.data.report[1];
          this.currentTitle = this.getTitle('report');
          this.activeName = "report";
          Object.keys(res.data).forEach((key,index)=>{
             this[key] = res.data[key];
             this.tabs.forEach((x,i,arr)=>{
               if(x.value == key){
                 arr[i].data = res.data[key];
               }
             })
          })
          this.tabs.forEach((x,i)=>{
              this.initChart(x.data,'各村'+this.getCurrentType()+this.getTitle(x.value)+'统计',this.getTitle(x.value),'chart'+(i+1));
          })
          this.$message({
            type:'success',
            message:'查询成功！'
          })
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  border: 1px solid darkgrey;
  padding: 10px;
  text-align: center;
}

.tjInfo {
  background-color: aliceblue;
  width: 100%;
  padding: 10px;
}
</style>
